<template>
  <div style="margin-top: 50px">
    <el-form ref="productAttrForm" label-width="150px" style="width: 800px" :model="value">
      <el-form-item label="商品相册：">
        <multiUpload 
          uploadAction="/manager/api/auth/product/upload_product"
          v-model="dealProductPic"
        >
        </multiUpload>
      </el-form-item>
      <el-form-item label="商品详情页：">
        <quill-editor class="editor" :options="editorOption"  v-model="value.detailHtml" />
      </el-form-item>
      <el-form-item style="margin-top:100px">
        <el-button @click="handlePrev()" size="small">上一步，填写商品促销</el-button>
        <el-button @click="handleCommit()" size="small" type="primary">完成，提交商品</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import multiUpload from "../../../../components/upload/multiUpload.vue";
export default {
  props:{
    value:Object,
    isUpdate:{
      type: Boolean,
      default: false,
    }
  },
  data(){
    return{
      editorOption:{
        placeholder:"请输入商品的详情页...."
      }
    }
  },
  computed:{
    dealProductPic:{
      get(){
        let pics = [];
        // 验证一下，是否有主图
        if(this.value.pic == null || this.value.pic == undefined || this.value.pic == ""){
          // 说明没有主图
          return pics;
        }
        // 说明有主图
        pics.push(this.value.pic)

        // 验证一下，是否有图片集
        if(this.value.albumPics == null || this.value.albumPics == undefined || this.value.albumPics == ""){
          // 说明没有图片集
          return pics;
        }
        // 有图片集  ablumPics:"1.png,2.png,3.png..."
        let albumPicsArr = this.value.albumPics.split(",");
        for(let i=0; i<albumPicsArr.length; i++){
          pics.push(albumPicsArr[i])
        }
        return pics
      },
      set(newValue){
        if(newValue == null || newValue.length === 0){
          this.value.pic = null;
          this.value.albumPics = null;
        }else{
          this.value.pic = newValue[0];
          this.value.albumPics = "";
          if(newValue.length > 1){
            // 说明上传的图片大于1张
            for(let i=1; i<newValue.length; i++){
              this.value.albumPics += newValue[i]
              if(newValue.length-1 !== i){
                this.value.albumPics += ",";
              }
            }
          }
        }
      }
    }
  },
  methods: {
    handlePrev() {
      this.$emit("prevStep");
    },
    handleCommit() {
      this.$emit("finishCommit",this.isUpdate);
    },
  },
  components: {
    multiUpload,
  },
};
</script>

<style lang="less" scoped>
.editor {
  height: 300px;
}
</style>